<%@ page contentType="text/html;charset=UTF-8" language="java"
pageEncoding="utf-8"
%>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>尚硅谷会员注册页面</title>
        <!--写base标签，永远固定相对路径跳转的结果-->
<%--        <base href="http://localhost:8080/book/">--%>
<%--<!--        book_war_exploded 这是项目工程名,跟老师的不太一样-->--%>

<%--        <link type="text/css" rel="stylesheet" href="static/css/style.css" >--%>
<%--<!--        href="static/css/style.css"  这个的出发路径是 book/web/-->--%>
<%--        <script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>--%>
        <%@include file="/pages/common/head.jsp"%><%--静态引用,包括项目起始点,和css,jquery等头部信息 --%>
        <script type="text/javascript">
            // 页面加载完成之后
            $(function () {
                // 给注册绑定单击事件
                $("#sub_btn").click(function () {
                    // 验证用户名：必须由字母，数字下划线组成，并且长度为5到12位
                    //1 获取用户名输入框里的内容
                    var usernameText = $("#username").val();
                    //2 创建正则表达式对象
                    var usernamePatt = /^\w{5,12}$/;
                    //3 使用test方法验证
                    if (!usernamePatt.test(usernameText)) {
                        //4 提示用户结果
                        $("span.errorMsg").text("用户名不合法！");

                        return false;
                    }

                    // 验证密码：必须由字母，数字下划线组成，并且长度为5到12位
                    //1 获取用户名输入框里的内容
                    var passwordText = $("#password").val();
                    //2 创建正则表达式对象
                    var passwordPatt = /^\w{5,12}$/;
                    //3 使用test方法验证
                    if (!passwordPatt.test(passwordText)) {
                        //4 提示用户结果
                        $("span.errorMsg").text("密码不合法！");

                        return false;
                    }

                    // 验证确认密码：和密码相同
                    //1 获取确认密码内容
                    var repwdText = $("#repwd").val();
                    //2 和密码相比较
                    if (repwdText != passwordText) {
                        //3 提示用户
                        $("span.errorMsg").text("确认密码和密码不一致！");

                        return false;
                    }

                    // 邮箱验证：xxxxx@xxx.com
                    //1 获取邮箱里的内容
                    var emailText = $("#email").val();
                    //2 创建正则表达式对象
                    var emailPatt = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;
                    //3 使用test方法验证是否合法
                    if (!emailPatt.test(emailText)) {
                        //4 提示用户
                        $("span.errorMsg").text("邮箱格式不合法！");

                        return false;
                    }

                    // 验证码：现在只需要验证用户已输入。因为还没讲到服务器。验证码生成。
                    var codeText = $("#code").val();

                    //去掉验证码前后空格
                    // alert("去空格前：["+codeText+"]")
                    codeText = $.trim(codeText);
                    // alert("去空格后：["+codeText+"]")

                    if (codeText == null || codeText == "") {
                        //4 提示用户
                        $("span.errorMsg").text("验证码不能为空！");

                        return false;
                    }

                    // 去掉错误信息
                    $("span.errorMsg").text("");

                });

            });

        </script>
    <style type="text/css">
        .login_form{
            height:420px;
            margin-top: 25px;
        }

    </style>
        <script>
            $(function () {
                $("#username").blur(function () {//失去焦点行为
                    //$(this).val();
                    $.ajax({
                        type:"post",
                        url:"<%=basepath%>userServlet?action=ajaxExistUsername",
                        data:$('form').serialize(), //它可以把表单用name序列化成一个字符串
                        success:function (response,status,xhr) {
                            //console.log(response)
                            var jsonObj=JSON.parse(response);
                            //var jsonObj=$.parseJSON( response )
                            //console.log(typeof (jsonObj));
                            //console.log(jsonObj["existsUsername"]);//js中的json对象要这样读
                            if(jsonObj["existsUsername"]){
                                $(".errorMsg").text("用户名不可用")
                            }else{
                                $(".errorMsg").text("用户名可用")
                            }
                        },
                        timeout:10000, //如果超时1000毫秒，就结束
                        error:function (xhr,errorText,errorType) { //错误后的行为
                            console.log("errorText:"+errorText); //error
                            console.log("errorType:"+errorType); //not found
                            console.log("xhr.status:"+xhr.status); //404
                            console.log("xhr.statusText:"+xhr.statusText); //not found
                        },
                        dataType:"text" //类型还有json,能免去接受到回复后,处理json文本后的过程 还有xml类型,一般不用
                    })
                })
            })
        </script>
    </head>
    <body>
        <div id="login_header">
            <img class="logo_img" alt="" src=<%=basepath+"static/img/logo.gif"%> >
        </div>

            <div class="login_banner">

                <div id="l_content">
                    <span class="login_word">欢迎注册</span>
                </div>

                <div id="content">
                    <div class="login_form">
                        <div class="login_box">
                            <div class="tit">
                                <h1>注册尚硅谷会员</h1>
                                <span class="errorMsg">
<%--                                    <%=request.getAttribute("msg")==null?"请输入用户名":request.getAttribute("msg")%>--%>
                                ${empty requestScope.msg?"请输入用户名":requestScope.msg} <%--用el表达式替换jsp表达式,短一点--%>
                                </span>
                            </div>
                            <div class="form">
<%--                            <form action=<%=basepath+"registServlet"%> method="post">--%>
                                <form action=<%=basepath+"userServlet"%> method="post">
                                    <input type="hidden" name="action" value="regist">
                                    <label>用户名称：</label>
                                    <input class="itxt" type="text" placeholder="请输入用户名"
<%--                                           value="<%=request.getAttribute("username")==null?"":request.getAttribute("username")%>"--%>
                                           value="${requestScope.username}" <%--el表达式默认返回就是空字符串,所以,不需要判断是否有值,然后负空.它自己就会把null写成空--%>
                                           autocomplete="off" tabindex="1" name="username" id="username" />
                                    <br />
                                    <br />
                                    <label>用户密码：</label>
                                    <input class="itxt" type="password" placeholder="请输入密码"
<%--                                           value="<%=request.getAttribute("password")==null?"":request.getAttribute("password")%>"--%>
                                           value="${requestScope.password}" <%--el表达式默认返回就是空字符串,所以,不需要判断是否有值,然后负空.它自己就会把null写成空--%>
                                           autocomplete="off" tabindex="1" name="password" id="password" />
                                    <br />
                                    <br />
                                    <label>确认密码：</label>
                                    <input class="itxt" type="password" placeholder="确认密码"
<%--                                           value="<%=request.getAttribute("repwd")==null?"":request.getAttribute("repwd")%>"--%>
                                           value="${requestScope.repwd}" <%--el表达式默认返回就是空字符串,所以,不需要判断是否有值,然后负空.它自己就会把null写成空--%>
                                           autocomplete="off" tabindex="1" name="repwd" id="repwd" />
                                    <br />
                                    <br />
                                    <label>电子邮件：</label>
                                    <input class="itxt" type="text" placeholder="请输入邮箱地址"
<%--                                           value="<%=request.getAttribute("email")==null?"":request.getAttribute("email")%>"--%>
                                           value="${requestScope.email}" <%--el表达式默认返回就是空字符串,所以,不需要判断是否有值,然后负空.它自己就会把null写成空--%>
                                           autocomplete="off" tabindex="1" name="email" id="email" />
                                    <br />
                                    <br />
                                    <label>验证码：</label>
                                    <input class="itxt" type="text" name="code" style="width: 80px;" id="code"
<%--                                           value="<%=request.getAttribute("code")==null?"abcde":request.getAttribute("code")%>"--%>
                                           value="${requestScope.code}" <%--el表达式默认返回就是空字符串,所以,不需要判断是否有值,然后负空.它自己就会把null写成空--%>
                                    />
                                    <img id="code_img" alt="" src="<%=basepath%>kaptcha.jpg" style="float: right; margin-right: 40px;width: 120px;height: 40px">
                                    <script>
                                        var code_imgObj=document.getElementById("code_img");
                                        code_imgObj.onclick=function () {
                                            this.src="<%=basepath%>kaptcha.jpg"//http://localhost:80/kaptcha.jpg
                                        }
                                    </script>
                                    <br />
                                    <br />
                                    <input type="submit" value="注册" id="sub_btn" />
                                </form>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
<%--        <div id="bottom">--%>
<%--            <span>--%>
<%--                尚硅谷书城.Copyright &copy;2015--%>
<%--            </span>--%>
<%--        </div>--%>
        <%@include file="/pages/common/foot.jsp"%><%--静态引用,公共底部--%>
    </body>
</html>